<template>
	<view class="">
		<u-sticky>
			<view class="bg-white tabs flex px-2 pt-2">
				<text class="font_24 py-1 mr-4" v-for="(item, tabIdx) of tabs" :key="tabIdx" :class="{ active: tabIdx == current }" @click="tabChange(tabIdx)">{{ item }}</text>
			</view>
			<view class="px-2" v-if="current != 0">
				<!-- <tab :tab-list="contTabs" @tabAll="tabAll" @contTabChange="contTabChange"></tab> -->
				<view class="cont_tab flex justify-around">
					<scroll-view scroll-x="true" show-scrollbar="false" class="scroll_cont">
						<view class="tab_item font_24 text-white mr-1" :class="{ cont_tab_active: contTabCur == -1 }" @click="tabAll">全部</view>
						<view
							class="tab_item font_24 text-white mr-1"
							v-for="(item, index) of contTabs"
							:key="item.id"
							:class="{ cont_tab_active: contTabCur == index }"
							@click="contTabChange(item, index)"
						>
							{{ item.title }}
						</view>
					</scroll-view>
				</view>
			</view>
		</u-sticky>
		<view class="">
			<view v-if="list.length == 0">
				<view class="p-2 mt-3"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
			</view>
			<view v-else>
				<view v-if="current == 0" class=""><new-list :list="list" :favorite="true"></new-list></view>
				<view v-else-if="current == 1" class="container mt-3"><product-list :list="list" :btn-show="true" class="flex flex-wrap justify-between"></product-list></view>
				<view v-else class="container"><company-list :list="list" check-types="qy"></company-list></view>
				<u-loadmore :status="status" color="#E5E5E5" lineColor="#E5E5E5" dashed line />
			</view>
		</view>
	</view>
</template>

<script>
import { productCategory } from '@/api/home/nav/product_data.js';
import { getProductCate } from '@/api/home/company.js';
import { getCompanyList, getProductList, getNewsCollectList } from '@/api/my/collect.js';
import tab from '@/components/tab/index.vue';
import productList from '@/components/product_list/product_list.vue';
import companyList from '@/components/company_list.vue';
import newList from '@/components/news_list.vue';
export default {
	components: {
		tab,
		productList,
		companyList,
		newList
	},
	data() {
		return {
			tabs: ['内容', '产品', '企业'],
			current: 0,
			contTabCur: -1,
			contTabs: [],
			list: [],
			page: 1,
			status: 'loadmore',
			suo: true,
			cateId: ''
		};
	},
	onReachBottom() {
		if (this.suo) {
			//定义个小锁，当没有数据时锁住suo
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				if (this.current == 0) {
					this.newList();
				} else if (this.current == 1) {
					this.getProduct(this.list[this.contTabCur].id);
				} else {
					this.getcompany(this.list[this.contTabCur].id);
				}
			}, 1000);
		}
	},
	// onShow() {
	// 	this.getProduct('');
	// },
	onLoad() {
		this.newList();
		// this.productClassify();
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		tabChange(idx) {
			this.current = idx;
			this.contTabCur = -1;
			this.page = 1;
			// console.log(this.current);
			if (idx == 0) {
				this.newList();
			} else if (idx == 1) {
				this.productClassify();
			} else {
				this.companyclassify();
			}
			this.reset();
		},
		// tab-全部
		tabAll() {
			this.contTabCur = -1;
			this.cateId = '';
			this.reset();
			if (this.current == 1) {
				this.getProduct('');
			} else if (this.current == 2) {
				this.getcompany('');
			}
		},
		contTabChange(e, idx) {
			console.log(e);
			this.contTabCur = idx;
			// this.contTabCur = -1;
			this.cateId = e.id;
			this.reset();
			if (this.current == 1) {
				this.getProduct(e.id);
			} else if (this.current == 2) {
				this.getcompany(e.id);
			}
		},
		// 获取新闻列表
		newList() {
			getNewsCollectList({ page: this.page }).then(res => {
				console.log(res);
				if (res.code == 0) {
					this.list.push(...res.data.list);
					// console.log('this.list===', this.list);
					if (res.data.list.length == 0) {
						this.status = 'nomore';
						this.suo = false;
					} else if (res.data.list.length < 10) {
						this.status = 'nomore';
						this.suo = false;
					} else {
						this.status = 'loadmore';
						this.suo = true;
					}
				}
			});
		},
		// 获取产品分类
		productClassify() {
			productCategory()
				.then(res => {
					// console.log('产品分类', res);
					if (res.code == 0) {
						this.contTabs = res.data;
						this.reset();
						this.getProduct('');
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取产品分类失败', err);
				});
		},
		// 获取产品列表
		getProduct(val) {
			let msg = {
				page: this.page,
				mid: val,
				token: uni.getStorageSync('userInfo').token || '',
				uid: uni.getStorageSync('userInfo').userId || ''
			};
			getProductList(msg)
				.then(res => {
					// console.log('产品列表', res);
					if (res.code == 0) {
						this.list.push(...res.data.list);
						if (res.data.list.length == 0) {
							this.status = 'nomore';
							this.suo = false;
						} else if (res.data.list.length < 10) {
							this.status = 'nomore';
							this.suo = false;
						} else {
							this.status = 'loadmore';
							this.suo = true;
						}
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取收藏产品失败', err);
				});
		},
		// 获取企业分类
		companyclassify() {
			getProductCate()
				.then(res => {
					// console.log('企业分类', res);
					if (res.code == 0) {
						this.contTabs = res.data;
						this.reset();
						this.getcompany('');
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取企业分类失败', err);
				});
		},
		// 获取企业列表
		getcompany(val) {
			let msg = {
				page: this.page,
				catid: val,
				uid: uni.getStorageSync('userInfo').userId || '',
				utype: 1
			};
			getCompanyList(msg)
				.then(res => {
					// console.log('企业列表', res);
					if (res.code == 0) {
						this.list.push(...res.data.list);
						if (res.data.list.length == 0) {
							this.status = 'nomore';
							this.suo = false;
						} else if (res.data.list.length < 10) {
							this.status = 'nomore';
							this.suo = false;
						} else {
							this.status = 'loadmore';
							this.suo = true;
						}
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取收藏企业失败', err);
				});
		},
		reset() {
			this.page = 1;
			this.list = [];
		}
	}
};
</script>

<style lang="scss" scoped>
.tabs {
	width: 100%;
	border-bottom: 1px solid #d3d3d3;

	.active {
		font-weight: 700;
		color: $color14;
		font-size: 36rpx;
		border-bottom: 3px solid $color14;
		font-weight: bold;
	}
}

.cont_tab {
	background-color: #f2f2f2;
	padding: 30rpx 0;

	.tab_item {
		display: inline-block;
		background-color: #d3d3d3;
		padding: 5rpx 15rpx;
		border-radius: 15rpx;
	}

	.cont_tab_active {
		background-color: $color14;
	}

	.scroll_cont {
		white-space: nowrap;
		width: 100%;
	}
}
</style>
